<template>
  <div>
    <div class="links">
      <router-link to="/add">注册</router-link>
    </div>

    <h2>Users list</h2>
    <ul>
      <li v-for="u in users">
        {{ u.nickname }} {{ u.age }} <router-link :to="{path:'/update', query:{'id':u.id}}">Edit</router-link> <button type="button" @click="removeUser(u.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: []
    }
  },
  methods: {
    getUsers: function () {
      const _self = this;
      this.$ajax('user/list', 'GET', null, function (data) {
        _self.users = _self.users.concat(data.users);
      });
    },
    removeUser: function (id) {
      console.log('remove user id ' + id);
      this.$ajax('user/remove', 'DELETE', {'id': id}, function (data) {
        location.href = '/';
      });
    }
  },
  mounted: function () {
    this.getUsers();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
